<template>
    <v-combobox
        v-model="search"
        :items="items"
        :loading="loading"
        :search-input.sync="searchInput"
        label="输入编码或名称搜索全量数据"
        item-text="title"
        item-value="value"
        density="compact"
        hide-selected
        return-object
        :menu="menu"
        :custom-filter="searchFilter"
        @update:model-value="onUpdateModelValue">
    <template v-slot:item="{ item }">
        <v-list-item v-if="item"
            :title="item.title"
            :subtitle="item.value"
            class="v-list-item"
            @click="onUpdateModelValue(item.value)"
            :key="item.value">
        </v-list-item>
    </template>
    </v-combobox>
</template>
<script setup>
const search = ref('');
const items = ref([
    { value: 'sz000001', title: '平安银行' },
    { value: 'sz000002', title: '万科A' },
    { value: 'sz000003', title: '招商银行' },
    { value: 'sz000004', title: '格力电器' },
    { value: 'sz000005', title: '美的集团' }
]);
const menu = ref(false);
const loading = ref(false);
const searchInput = ref('');

function onUpdateModelValue(value) {
    search.value = value;
    menu.value = true;
    setTimeout(() => {
        menu.value = false; 
    }, 100);
    console.log('update', menu.value);
}

function onSearch() {
    loading.value = true;
    // Simulate an API call
    setTimeout(() => {
        loading.value = false;
        console.log('Search completed');
    }, 1000);
}
function searchFilter(value, query, item) {
    return value.includes(query) || item.value.includes(query)
}
</script>
<style scoped>
.v-list-item:hover {
    background-color: #3d3b3b; /* Add hover effect */
}
.v-list-item {
    cursor: pointer;
}
</style>